/**
 * @description 首页-头部页面对应的属性组件
 */

import React, { useEffect, useMemo, useState, useContext, useRef } from 'react'
import { Collapse, Form, Input, InputNumber, Radio, Select } from 'antd';

import { replaceObjectStyle, replaceCssStyle } from '@/utils/style';
import { setAttrForm } from '@/utils/AttrForm';
import { copyTemplate, pasteTemplate, copyBlock, pasteBlock } from '@/utils/clipboard';
import AnimateOptions from '@/components/StylesWrapper/AnimateOptions.js';
import { goodTypeOptions, switchGoodType } from '@/utils/goodList';
import { iconTextReg } from '@/utils/Const';
import { UpdateContext } from '@/store/updateContext';

import StyleWrapper from '@/components/StylesWrapper';
import CssEdit from '@/components/Monaco/CssEidt';
import AttrHeaderBtn from './Components/AttrHeaderBtn';
import FileUpload from '@/components/StylesWrapper/FileUpload';

import GoodAttrEntry from './GoodAttr';
import AttrExtra from './Components/AttrExtra';

// 标题和后缀现实的开关
const titleShowOptions = [
  {
    label: '开',
    value: true
  },
  {
    label: '关',
    value: false
  }
]


function HomeAttr({ template2, onConfigEvent, setIsRightAttr, actKey }) {

  const updateCtx = useContext(UpdateContext)
  const [form] = Form.useForm()
  // css编辑器
  const [open, setOpen] = useState(false)
  // css编辑器实例
  const cssEditRef = useRef()

  // 更新 单个 style样式
  let upateStyleEvent = (keys) => {
    let divData = Object.assign({}, form.getFieldValue(keys))

    // keys数组的最后一项，就是key
    let key = keys.at(-1)
    replaceObjectStyle(actKey, key, divData)
  }

  // 组件css变化
  let cssChange = (value) => {
    form.setFieldValue('css', value)
    replaceCssStyle(actKey, value)
  }

  // 图标输入框变化事件，比普通输入框，多一个字符串转化逻辑
  let iconEvent = (keys, value) => {

    // 去除 空格、<、/> 
    let newValue = value.replace(iconTextReg, '')
    form.setFieldValue(keys, newValue)

    onConfigEvent(keys, newValue)
  }

  // 头部按钮事件
  let handleHeaderEvent = (key) => {
    switch (key) {

      // 打开组件css编辑
      case 'css':
        setOpen(true)
        break;

      // 复制模板
      case 'copy':
        copyTemplate(actKey, [], form)
        break;

      // 黏贴模板
      case 'paste':
        pasteTemplate(form, onConfigEvent, actKey)
        updateCtx.setUpdateFlag(pre => !pre)

        // 修改css编辑器的值
        cssEditRef.current.setValue(form.getFieldValue('css'))
        break;

      // 切换位置
      case 'position':
        setIsRightAttr((isRight) => !isRight)
        break;

      default:
        break;
    }
  }

  /**
   * @description 属性栏右上角按钮事件
   * @param { string } eventKey 事件名: copy | paste
   * @param { string } blockKey 功能块名字。比如: 分类category
   * @param { string } paramKeys 表单的属性keys。 比如: ['category']
   * @param { string } classKey 前缀key 比如: listpage
   */
  let handleAttrEvent = (eventKey, blockKey, paramKeys, classKey) => {
    switch (eventKey) {

      // 复制模块
      case 'copy':
        copyBlock(actKey, blockKey, paramKeys, classKey, form)
        break;

      // 黏贴模块
      case 'paste':
        pasteBlock(actKey, blockKey, paramKeys, classKey, form, onConfigEvent)
        updateCtx.setUpdateFlag(pre => !pre)
        break;


      default:
        break;
    }
  }
  // -----------------------------------
  // 构造折叠面板的数据
  // -----------------------------------

  // 一级
  let items = useMemo(() => {
    let items = [
      {
        key: 'page',
        label: "总盒子",
        children:
          <StyleWrapper form={form} preKeys={['page', 'default']} onStyleChange={() => upateStyleEvent(['page'])} />
      },
      {
        key: 'search',
        label: '搜索',
        extra: <AttrExtra onEvent={(eventKey) => handleAttrEvent(eventKey, 'globalsearch', ['homesearch'], 'homesearch')} />,
        children:
          <>
            <Form.Item
              label="开关"
              name={['base', 'search_flag']}
            >
              <Radio.Group
                options={titleShowOptions}
                onChange={(e) => onConfigEvent(['base', 'search_flag'], e.target.value)}
                optionType="button"
                buttonStyle="solid"
              />
            </Form.Item>
            <Form.Item
              label="动画属性"
              name={['base', 'search_animate']}
            >
              <Select
                allowClear
                options={AnimateOptions}
                onChange={(value) => onConfigEvent(['base', 'search_animate'], value)}
              />
            </Form.Item>

            {
              template2.base.search_flag &&
              <Collapse accordion size='middle' items={[
                {
                  key: 'wrapper',
                  label: '总盒子',
                  children: <StyleWrapper form={form} preKeys={['homesearch', 'homesearch_box', 'default']} onStyleChange={() => upateStyleEvent(['homesearch', 'homesearch_box'])} />
                },
                {
                  key: 'select',
                  label: '下拉',
                  children: <Collapse accordion size='middle' items={[
                    {
                      key: 'box',
                      label: '盒子',
                      children: <StyleWrapper form={form} preKeys={['homesearch', 'homesearch_select', 'default']} onStyleChange={() => upateStyleEvent(['homesearch', 'homesearch_select'])} />
                    },
                    {
                      key: 'input',
                      label: '下拉',
                      children: <StyleWrapper form={form} preKeys={['homesearch', 'homesearch_select_input', 'default']} onStyleChange={() => upateStyleEvent(['homesearch', 'homesearch_select_input'])} />
                    },
                    {
                      key: 'icon',
                      label: '图标',
                      children: <StyleWrapper form={form} preKeys={['homesearch', 'homesearch_select_icon', 'default']} onStyleChange={() => upateStyleEvent(['homesearch', 'homesearch_select_icon'])} />
                    },
                  ]} />
                },
                {
                  key: 'input',
                  label: '输入框',
                  children: <Collapse accordion size='middle' items={[
                    {
                      key: 'input',
                      label: '输入框',
                      children: <StyleWrapper form={form} preKeys={['homesearch', 'homesearch_input', 'default']} onStyleChange={() => upateStyleEvent(['homesearch', 'homesearch_input'])} />
                    },
                    {
                      key: 'input-focus',
                      label: '输入框-聚焦',
                      children: <StyleWrapper form={form} preKeys={['homesearch', 'homesearch_input', 'focus']} onStyleChange={() => upateStyleEvent(['homesearch', 'homesearch_input'])} />
                    },
                    {
                      key: 'icon',
                      label: '图标',
                      children: <StyleWrapper form={form} preKeys={['homesearch', 'homesearch_input_icon', 'default']} onStyleChange={() => upateStyleEvent(['homesearch', 'homesearch_input_icon'])} />
                    },
                    {
                      key: 'icon-hover',
                      label: '图标-悬浮',
                      children: <StyleWrapper form={form} preKeys={['homesearch', 'homesearch_input_icon', 'hover']} onStyleChange={() => upateStyleEvent(['homesearch', 'homesearch_input_icon'])} />
                    },
                  ]} />
                },
                {
                  key: 'btn',
                  label: '按钮',
                  children: <Collapse accordion size='middle' items={[
                    {
                      key: 'btn',
                      label: '按钮',
                      children: <StyleWrapper form={form} preKeys={['homesearch', 'homesearch_btn', 'default']} onStyleChange={() => upateStyleEvent(['homesearch', 'homesearch_btn'])} />
                    },
                    {
                      key: 'btn-hover',
                      label: '按钮-悬浮',
                      children: <StyleWrapper form={form} preKeys={['homesearch', 'homesearch_btn', 'hover']} onStyleChange={() => upateStyleEvent(['homesearch', 'homesearch_btn'])} />
                    },

                  ]} />
                },

              ]} />
            }
          </>
      },
      {
        key: 'exhibition',
        label: '商品展示',
        children:
          <>
            <Form.Item
              label="动画属性"
              name={['base', 'exhibition_animate']}
            >
              <Select
                allowClear
                options={AnimateOptions}
                onChange={(value) => onConfigEvent(['base', 'exhibition_animate'], value)}
              />
            </Form.Item>
            <Form.Item
              label="列表样式"
              name={['exhibition', 'base', 'type']}
            >
              <Select
                options={goodTypeOptions}
                onChange={(value) => switchGoodType(value, ['exhibition', 'base', 'type'], 'exhibition', onConfigEvent, form, actKey)}
              >
              </Select>
            </Form.Item >

            <Collapse accordion items={[
              {
                key: 'wrapper',
                label: '总盒子',
                children: <StyleWrapper form={form} preKeys={['exhibition_box', 'default']} onStyleChange={() => upateStyleEvent(['exhibition_box'])} />
              },
              {
                key: "title",
                label: '标题',
                extra: <AttrExtra onEvent={(eventKey) => handleAttrEvent(eventKey, 'title', ['exhibition_title'], 'exhibition')} />,
                children:
                  <Collapse accordion items={[
                    {
                      key: "box",
                      label: "盒子",
                      children: <StyleWrapper form={form} preKeys={['exhibition_title', 'exhibition_title', 'default']} onStyleChange={() => upateStyleEvent(['exhibition_title', 'exhibition_title'])} />
                    },
                    {
                      key: "text",
                      label: "标题",
                      children: <StyleWrapper form={form} preKeys={['exhibition_title', 'exhibition_title_text', 'default']} onStyleChange={() => upateStyleEvent(['exhibition_title', 'exhibition_title_text'])} />
                    },
                    {
                      key: "subtext",
                      label: "副标题",
                      children: <StyleWrapper form={form} preKeys={['exhibition_title', 'exhibition_title_subtext', 'default']} onStyleChange={() => upateStyleEvent(['exhibition_title', 'exhibition_title_subtext'])} />
                    },
                  ]}
                  />
              },
              {
                key: "category",
                label: '分类',
                extra: <AttrExtra onEvent={(eventKey) => handleAttrEvent(eventKey, 'category', ['exhibition_category'], 'exhibition')} />,
                children:
                  <>
                    <Form.Item
                      label="个数"
                      name={['exhibition_category', 'base', 'limit']}
                    >
                      <InputNumber
                        min={1}
                        precision={0}
                        onChange={(value) => onConfigEvent(['exhibition_category', 'base', 'limit'], value)}
                      />
                    </Form.Item>

                    <Collapse accordion items={[
                      {
                        key: "box",
                        label: "盒子",
                        children: <StyleWrapper form={form} preKeys={['exhibition_category', 'exhibition_category', 'default']} onStyleChange={() => upateStyleEvent(['exhibition_category', 'exhibition_category'])} />
                      },
                      {
                        key: "item",
                        label: "item盒子",
                        children: <StyleWrapper form={form} preKeys={['exhibition_category', 'exhibition_category_item', 'default']} onStyleChange={() => upateStyleEvent(['exhibition_category', 'exhibition_category_item'])} />
                      },
                      {
                        key: "item-hover",
                        label: "item盒子-悬浮",
                        children: <StyleWrapper form={form} preKeys={['exhibition_category', 'exhibition_category_item', 'hover']} onStyleChange={() => upateStyleEvent(['exhibition_category', 'exhibition_category_item'])} />
                      },
                      {
                        key: "item-active",
                        label: "item盒子-激活",
                        children: <StyleWrapper form={form} preKeys={['exhibition_category', 'exhibition_category_item_active', 'default']} onStyleChange={() => upateStyleEvent(['exhibition_category', 'exhibition_category_item_active'])} />
                      },
                      {
                        key: "img",
                        label: "图片",
                        children: <StyleWrapper form={form} preKeys={['exhibition_category', 'exhibition_category_img', 'default']} onStyleChange={() => upateStyleEvent(['exhibition_category', 'exhibition_category_img'])} />
                      },
                      {
                        key: "text",
                        label: "文本",
                        children: <StyleWrapper form={form} preKeys={['exhibition_category', 'exhibition_category_text', 'default']} onStyleChange={() => upateStyleEvent(['exhibition_category', 'exhibition_category_text'])} />
                      },
                    ]}
                    />
                  </>

              },
              {
                key: "list",
                label: '列表',
                extra: <AttrExtra onEvent={(eventKey) => handleAttrEvent(eventKey, 'hot', ['exhibition'], 'exhibition')} />,
                children:
                  < GoodAttrEntry type={template2.exhibition.base.type} blockKey='exhibition' form={form} onConfigEvent={onConfigEvent} upateStyleEvent={upateStyleEvent} />
              },
              {
                key: "more",
                label: '更多',
                extra: <AttrExtra onEvent={(eventKey) => handleAttrEvent(eventKey, 'more', ['exhibition_more'], 'exhibition')} />,
                children:
                  <>
                    <Form.Item
                      label="文本"
                      name={['exhibition_more', 'base', 'text']}
                    >
                      <Input
                        onChange={(e) => onConfigEvent(['exhibition_more', 'base', 'text'], e.target.value)}
                      />
                    </Form.Item>

                    <Form.Item
                      label="图标"
                      name={['exhibition_more', 'base', 'icon']}
                    >
                      <Input
                        onChange={(e) => iconEvent(['exhibition_more', 'base', 'icon'], e.target.value)}
                      />
                    </Form.Item>

                    <Collapse accordion items={[
                      {
                        key: "box",
                        label: "盒子",
                        children: <StyleWrapper form={form} preKeys={['exhibition_more', 'exhibition_more', 'default']} onStyleChange={() => upateStyleEvent(['exhibition_more', 'exhibition_more'])} />

                      },
                      {
                        key: "box-hover",
                        label: "盒子-悬浮",
                        children: <StyleWrapper form={form} preKeys={['exhibition_more', 'exhibition_more', 'hover']} onStyleChange={() => upateStyleEvent(['exhibition_more', 'exhibition_more'])} />

                      },
                    ]} />
                  </>

              }
            ]} />
          </>
      },
      {
        key: 'recommend',
        label: '商品推荐',
        children:
          <>
            <Form.Item
              label="动画属性"
              name={['base', 'recommend_animate']}
            >
              <Select
                allowClear
                options={AnimateOptions}
                onChange={(value) => onConfigEvent(['base', 'recommend_animate'], value)}
              />
            </Form.Item>
            <Form.Item
              label="列表样式"
              name={['recommend', 'base', 'type']}
            >
              <Select
                options={goodTypeOptions}
                onChange={(value) => switchGoodType(value, ['recommend', 'base', 'type'], 'recommend', onConfigEvent, form, actKey)}
              >
              </Select>
            </Form.Item >

            <Collapse accordion items={[
              {
                key: 'wrapper',
                label: '总盒子',
                children: <StyleWrapper form={form} preKeys={['recommend_box', 'default']} onStyleChange={() => upateStyleEvent(['recommend_box'])} />
              },
              {
                key: "title",
                label: '标题',
                extra: <AttrExtra onEvent={(eventKey) => handleAttrEvent(eventKey, 'title', ['recommend_title'], 'recommend')} />,
                children:
                  <Collapse accordion items={[
                    {
                      key: "box",
                      label: "盒子",
                      children: <StyleWrapper form={form} preKeys={['recommend_title', 'recommend_title', 'default']} onStyleChange={() => upateStyleEvent(['recommend_title', 'recommend_title'])} />
                    },
                    {
                      key: "text",
                      label: "标题",
                      children: <StyleWrapper form={form} preKeys={['recommend_title', 'recommend_title_text', 'default']} onStyleChange={() => upateStyleEvent(['recommend_title', 'recommend_title_text'])} />
                    },
                    {
                      key: "subtext",
                      label: "副标题",
                      children: <StyleWrapper form={form} preKeys={['recommend_title', 'recommend_title_subtext', 'default']} onStyleChange={() => upateStyleEvent(['recommend_title', 'recommend_title_subtext'])} />
                    },
                  ]}
                  />
              },
              {
                key: "category",
                label: '分类',
                extra: <AttrExtra onEvent={(eventKey) => handleAttrEvent(eventKey, 'category', ['recommend_category'], 'recommend')} />,
                children:
                  <>
                    <Form.Item
                      label="个数"
                      name={['recommend_category', 'base', 'limit']}
                    >
                      <InputNumber
                        min={1}
                        precision={0}
                        onChange={(value) => onConfigEvent(['recommend_category', 'base', 'limit'], value)}
                      />
                    </Form.Item>

                    <Collapse accordion items={[
                      {
                        key: "box",
                        label: "盒子",
                        children: <StyleWrapper form={form} preKeys={['recommend_category', 'recommend_category', 'default']} onStyleChange={() => upateStyleEvent(['recommend_category', 'recommend_category'])} />
                      },
                      {
                        key: "item",
                        label: "item盒子",
                        children: <StyleWrapper form={form} preKeys={['recommend_category', 'recommend_category_item', 'default']} onStyleChange={() => upateStyleEvent(['recommend_category', 'recommend_category_item'])} />
                      },
                      {
                        key: "item-hover",
                        label: "item盒子-悬浮",
                        children: <StyleWrapper form={form} preKeys={['recommend_category', 'recommend_category_item', 'hover']} onStyleChange={() => upateStyleEvent(['recommend_category', 'recommend_category_item'])} />
                      },
                      {
                        key: "item-active",
                        label: "item盒子-激活",
                        children: <StyleWrapper form={form} preKeys={['recommend_category', 'recommend_category_item_active', 'default']} onStyleChange={() => upateStyleEvent(['recommend_category', 'recommend_category_item_active'])} />
                      },
                      {
                        key: "img",
                        label: "图片",
                        children: <StyleWrapper form={form} preKeys={['recommend_category', 'recommend_category_img', 'default']} onStyleChange={() => upateStyleEvent(['recommend_category', 'recommend_category_img'])} />
                      },
                      {
                        key: "text",
                        label: "文本",
                        children: <StyleWrapper form={form} preKeys={['recommend_category', 'recommend_category_text', 'default']} onStyleChange={() => upateStyleEvent(['recommend_category', 'recommend_category_text'])} />
                      },
                    ]}
                    />
                  </>

              },
              {
                key: "list",
                label: '列表',
                extra: <AttrExtra onEvent={(eventKey) => handleAttrEvent(eventKey, 'hot', ['recommend'], 'recommend')} />,
                children:
                  < GoodAttrEntry type={template2.recommend.base.type} blockKey='recommend' form={form} onConfigEvent={onConfigEvent} upateStyleEvent={upateStyleEvent} />
              },
              {
                key: "more",
                label: '更多',
                extra: <AttrExtra onEvent={(eventKey) => handleAttrEvent(eventKey, 'more', ['recommend_more'], 'recommend')} />,
                children:
                  <>
                    <Form.Item
                      label="文本"
                      name={['recommend_more', 'base', 'text']}
                    >
                      <Input
                        onChange={(e) => onConfigEvent(['recommend_more', 'base', 'text'], e.target.value)}
                      />
                    </Form.Item>

                    <Form.Item
                      label="图标"
                      name={['recommend_more', 'base', 'icon']}
                    >
                      <Input
                        onChange={(e) => iconEvent(['recommend_more', 'base', 'icon'], e.target.value)}
                      />
                    </Form.Item>

                    <Collapse accordion items={[
                      {
                        key: "box",
                        label: "盒子",
                        children: <StyleWrapper form={form} preKeys={['recommend_more', 'recommend_more', 'default']} onStyleChange={() => upateStyleEvent(['recommend_more', 'recommend_more'])} />

                      },
                      {
                        key: "box-hover",
                        label: "盒子-悬浮",
                        children: <StyleWrapper form={form} preKeys={['recommend_more', 'recommend_more', 'hover']} onStyleChange={() => upateStyleEvent(['recommend_more', 'recommend_more'])} />

                      },
                    ]} />
                  </>

              }
            ]} />
          </>
      },
      {
        key: 'news',
        label: '新闻资讯',
        children:
          <>
            <Form.Item
              label="动画属性"
              name={['base', 'news_animate']}
            >
              <Select
                allowClear
                options={AnimateOptions}
                onChange={(value) => onConfigEvent(['base', 'news_animate'], value)}
              />
            </Form.Item>
            <Form.Item
              label="列表样式"
              name={['news', 'base', 'type']}
            >
              <Select
                options={goodTypeOptions}
                onChange={(value) => switchGoodType(value, ['news', 'base', 'type'], 'news', onConfigEvent, form, actKey)}
              >
              </Select>
            </Form.Item >

            <Collapse accordion items={[
              {
                key: 'wrapper',
                label: '总盒子',
                children: <StyleWrapper form={form} preKeys={['news_box', 'default']} onStyleChange={() => upateStyleEvent(['news_box'])} />
              },
              {
                key: "title",
                label: '标题',
                extra: <AttrExtra onEvent={(eventKey) => handleAttrEvent(eventKey, 'title', ['news_title'], 'news')} />,
                children:
                  <Collapse accordion items={[
                    {
                      key: "box",
                      label: "盒子",
                      children: <StyleWrapper form={form} preKeys={['news_title', 'news_title', 'default']} onStyleChange={() => upateStyleEvent(['news_title', 'news_title'])} />
                    },
                    {
                      key: "text",
                      label: "标题",
                      children: <StyleWrapper form={form} preKeys={['news_title', 'news_title_text', 'default']} onStyleChange={() => upateStyleEvent(['news_title', 'news_title_text'])} />
                    },
                    {
                      key: "subtext",
                      label: "副标题",
                      children: <StyleWrapper form={form} preKeys={['news_title', 'news_title_subtext', 'default']} onStyleChange={() => upateStyleEvent(['news_title', 'news_title_subtext'])} />
                    },
                  ]}
                  />
              },
              {
                key: "category",
                label: '分类',
                extra: <AttrExtra onEvent={(eventKey) => handleAttrEvent(eventKey, 'category', ['news_category'], 'news')} />,
                children:
                  <>
                    <Form.Item
                      label="个数"
                      name={['news_category', 'base', 'limit']}
                    >
                      <InputNumber
                        min={1}
                        precision={0}
                        onChange={(value) => onConfigEvent(['news_category', 'base', 'limit'], value)}
                      />
                    </Form.Item>

                    <Collapse accordion items={[
                      {
                        key: "box",
                        label: "盒子",
                        children: <StyleWrapper form={form} preKeys={['news_category', 'news_category', 'default']} onStyleChange={() => upateStyleEvent(['news_category', 'news_category'])} />
                      },
                      {
                        key: "item",
                        label: "item盒子",
                        children: <StyleWrapper form={form} preKeys={['news_category', 'news_category_item', 'default']} onStyleChange={() => upateStyleEvent(['news_category', 'news_category_item'])} />
                      },
                      {
                        key: "item-hover",
                        label: "item盒子-悬浮",
                        children: <StyleWrapper form={form} preKeys={['news_category', 'news_category_item', 'hover']} onStyleChange={() => upateStyleEvent(['news_category', 'news_category_item'])} />
                      },
                      {
                        key: "item-active",
                        label: "item盒子-激活",
                        children: <StyleWrapper form={form} preKeys={['news_category', 'news_category_item_active', 'default']} onStyleChange={() => upateStyleEvent(['news_category', 'news_category_item_active'])} />
                      },
                      {
                        key: "img",
                        label: "图片",
                        children: <StyleWrapper form={form} preKeys={['news_category', 'news_category_img', 'default']} onStyleChange={() => upateStyleEvent(['news_category', 'news_category_img'])} />
                      },
                      {
                        key: "text",
                        label: "文本",
                        children: <StyleWrapper form={form} preKeys={['news_category', 'news_category_text', 'default']} onStyleChange={() => upateStyleEvent(['news_category', 'news_category_text'])} />
                      },
                    ]}
                    />
                  </>
              },
              {
                key: "list",
                label: '列表',
                extra: <AttrExtra onEvent={(eventKey) => handleAttrEvent(eventKey, 'hot', ['news'], 'news')} />,
                children:
                  < GoodAttrEntry type={template2.news.base.type} blockKey='news' form={form} onConfigEvent={onConfigEvent} upateStyleEvent={upateStyleEvent} />
              },
              {
                key: "more",
                label: '更多',
                extra: <AttrExtra onEvent={(eventKey) => handleAttrEvent(eventKey, 'more', ['news_more'], 'news')} />,
                children:
                  <>
                    <Form.Item
                      label="文本"
                      name={['news_more', 'base', 'text']}
                    >
                      <Input
                        onChange={(e) => onConfigEvent(['news_more', 'base', 'text'], e.target.value)}
                      />
                    </Form.Item>

                    <Form.Item
                      label="图标"
                      name={['news_more', 'base', 'icon']}
                    >
                      <Input
                        onChange={(e) => iconEvent(['news_more', 'base', 'icon'], e.target.value)}
                      />
                    </Form.Item>

                    <Collapse accordion items={[
                      {
                        key: "box",
                        label: "盒子",
                        children: <StyleWrapper form={form} preKeys={['news_more', 'news_more', 'default']} onStyleChange={() => upateStyleEvent(['news_more', 'news_more'])} />

                      },
                      {
                        key: "box-hover",
                        label: "盒子-悬浮",
                        children: <StyleWrapper form={form} preKeys={['news_more', 'news_more', 'hover']} onStyleChange={() => upateStyleEvent(['news_more', 'news_more'])} />

                      },
                    ]} />
                  </>
              }
            ]} />
          </>
      },
      {
        key: 'aboutus',
        label: '关于我们',
        children:
          <>
            <Form.Item
              label="动画属性"
              name={['base', 'aboutus_animate']}
            >
              <Select
                allowClear
                options={AnimateOptions}
                onChange={(value) => onConfigEvent(['base', 'aboutus_animate'], value)}
              />
            </Form.Item>


            <Collapse accordion items={[
              {
                key: 'wrapper',
                label: '总盒子',
                children: <StyleWrapper form={form} preKeys={['aboutus_box', 'default']} onStyleChange={() => upateStyleEvent(['aboutus_box'])} />
              },
              {
                key: "title",
                label: '标题',
                extra: <AttrExtra onEvent={(eventKey) => handleAttrEvent(eventKey, 'title', ['aboutus_title'], 'aboutus')} />,
                children:
                  <Collapse accordion items={[
                    {
                      key: "box",
                      label: "盒子",
                      children: <StyleWrapper form={form} preKeys={['aboutus_title', 'aboutus_title', 'default']} onStyleChange={() => upateStyleEvent(['aboutus_title', 'aboutus_title'])} />
                    },
                    {
                      key: "text",
                      label: "标题",
                      children: <StyleWrapper form={form} preKeys={['aboutus_title', 'aboutus_title_text', 'default']} onStyleChange={() => upateStyleEvent(['aboutus_title', 'aboutus_title_text'])} />
                    },
                    {
                      key: "subtext",
                      label: "副标题",
                      children: <StyleWrapper form={form} preKeys={['aboutus_title', 'aboutus_title_subtext', 'default']} onStyleChange={() => upateStyleEvent(['aboutus_title', 'aboutus_title_subtext'])} />
                    },
                  ]}
                  />
              },
              {
                key: "list",
                label: '内容',
                extra: <AttrExtra onEvent={(eventKey) => handleAttrEvent(eventKey, 'aboutus', ['aboutus_content'], 'aboutus')} />,
                children:
                  <Collapse accordion items={[
                    {
                      key: "box",
                      label: "盒子",
                      children: <StyleWrapper form={form} preKeys={['aboutus_content', 'aboutus_content', 'default']} onStyleChange={() => upateStyleEvent(['aboutus_content', 'aboutus_content'])} />
                    },
                    {
                      key: "img-box",
                      label: "图片盒子",
                      children: <StyleWrapper form={form} preKeys={['aboutus_content', 'aboutus_img', 'default']} onStyleChange={() => upateStyleEvent(['aboutus_content', 'aboutus_img'])} />
                    },
                    {
                      key: "img1",
                      label: "图片1",
                      children: <StyleWrapper form={form} preKeys={['aboutus_content', 'aboutus_img1', 'default']} onStyleChange={() => upateStyleEvent(['aboutus_content', 'aboutus_img1'])} />
                    },
                    {
                      key: "img2",
                      label: "图片2",
                      children: <StyleWrapper form={form} preKeys={['aboutus_content', 'aboutus_img2', 'default']} onStyleChange={() => upateStyleEvent(['aboutus_content', 'aboutus_img2'])} />
                    },
                    {
                      key: "img3",
                      label: "图片3",
                      children: <StyleWrapper form={form} preKeys={['aboutus_content', 'aboutus_img3', 'default']} onStyleChange={() => upateStyleEvent(['aboutus_content', 'aboutus_img3'])} />
                    },
                    {
                      key: "desc",
                      label: "详情",
                      children: <StyleWrapper form={form} preKeys={['aboutus_content', 'aboutus_desc', 'default']} onStyleChange={() => upateStyleEvent(['aboutus_content', 'aboutus_desc'])} />
                    },
                  ]} />
              },
              {
                key: "more",
                label: '更多',
                extra: <AttrExtra onEvent={(eventKey) => handleAttrEvent(eventKey, 'more', ['aboutus_more'], 'aboutus')} />,
                children:
                  <>
                    <Form.Item
                      label="文本"
                      name={['aboutus_more', 'base', 'text']}
                    >
                      <Input
                        onChange={(e) => onConfigEvent(['aboutus_more', 'base', 'text'], e.target.value)}
                      />
                    </Form.Item>

                    <Form.Item
                      label="图标"
                      name={['aboutus_more', 'base', 'icon']}
                    >
                      <Input
                        onChange={(e) => iconEvent(['aboutus_more', 'base', 'icon'], e.target.value)}
                      />
                    </Form.Item>

                    <Collapse accordion items={[
                      {
                        key: "box",
                        label: "盒子",
                        children: <StyleWrapper form={form} preKeys={['aboutus_more', 'aboutus_more', 'default']} onStyleChange={() => upateStyleEvent(['aboutus_more', 'aboutus_more'])} />

                      },
                      {
                        key: "box-hover",
                        label: "盒子-悬浮",
                        children: <StyleWrapper form={form} preKeys={['aboutus_more', 'aboutus_more', 'hover']} onStyleChange={() => upateStyleEvent(['aboutus_more', 'aboutus_more'])} />

                      },
                    ]} />
                  </>
              }
            ]} />
          </>
      },
      {
        key: 'system',
        label: '系统简介',
        children:
          <>
            <Form.Item
              label="动画属性"
              name={['base', 'system_animate']}
            >
              <Select
                allowClear
                options={AnimateOptions}
                onChange={(value) => onConfigEvent(['base', 'system_animate'], value)}
              />
            </Form.Item>


            <Collapse accordion items={[
              {
                key: 'wrapper',
                label: '总盒子',
                children: <StyleWrapper form={form} preKeys={['system_box', 'default']} onStyleChange={() => upateStyleEvent(['system_box'])} />
              },
              {
                key: "title",
                label: '标题',
                extra: <AttrExtra onEvent={(eventKey) => handleAttrEvent(eventKey, 'title', ['system_title'], 'system')} />,
                children:
                  <Collapse accordion items={[
                    {
                      key: "box",
                      label: "盒子",
                      children: <StyleWrapper form={form} preKeys={['system_title', 'system_title', 'default']} onStyleChange={() => upateStyleEvent(['system_title', 'system_title'])} />
                    },
                    {
                      key: "text",
                      label: "标题",
                      children: <StyleWrapper form={form} preKeys={['system_title', 'system_title_text', 'default']} onStyleChange={() => upateStyleEvent(['system_title', 'system_title_text'])} />
                    },
                    {
                      key: "subtext",
                      label: "副标题",
                      children: <StyleWrapper form={form} preKeys={['system_title', 'system_title_subtext', 'default']} onStyleChange={() => upateStyleEvent(['system_title', 'system_title_subtext'])} />
                    },
                  ]}
                  />
              },
              {
                key: "list",
                label: '内容',
                extra: <AttrExtra onEvent={(eventKey) => handleAttrEvent(eventKey, 'aboutus', ['system_content'], 'system')} />,
                children:
                  <Collapse accordion items={[
                    {
                      key: "box",
                      label: "盒子",
                      children: <StyleWrapper form={form} preKeys={['system_content', 'system_content', 'default']} onStyleChange={() => upateStyleEvent(['system_content', 'system_content'])} />
                    },
                    {
                      key: "img-box",
                      label: "图片盒子",
                      children: <StyleWrapper form={form} preKeys={['system_content', 'system_img', 'default']} onStyleChange={() => upateStyleEvent(['system_content', 'system_img'])} />
                    },
                    {
                      key: "img1",
                      label: "图片1",
                      children: <StyleWrapper form={form} preKeys={['system_content', 'system_img1', 'default']} onStyleChange={() => upateStyleEvent(['system_content', 'system_img1'])} />
                    },
                    {
                      key: "img2",
                      label: "图片2",
                      children: <StyleWrapper form={form} preKeys={['system_content', 'system_img2', 'default']} onStyleChange={() => upateStyleEvent(['system_content', 'system_img2'])} />
                    },
                    {
                      key: "img3",
                      label: "图片3",
                      children: <StyleWrapper form={form} preKeys={['system_content', 'system_img3', 'default']} onStyleChange={() => upateStyleEvent(['system_content', 'system_img3'])} />
                    },
                    {
                      key: "desc",
                      label: "详情",
                      children: <StyleWrapper form={form} preKeys={['system_content', 'system_desc', 'default']} onStyleChange={() => upateStyleEvent(['system_content', 'system_desc'])} />
                    },
                  ]} />
              },
              {
                key: "more",
                label: '更多',
                extra: <AttrExtra onEvent={(eventKey) => handleAttrEvent(eventKey, 'more', ['system_more'], 'system')} />,
                children:
                  <>
                    <Form.Item
                      label="文本"
                      name={['system_more', 'base', 'text']}
                    >
                      <Input
                        onChange={(e) => onConfigEvent(['system_more', 'base', 'text'], e.target.value)}
                      />
                    </Form.Item>

                    <Form.Item
                      label="图标"
                      name={['system_more', 'base', 'icon']}
                    >
                      <Input
                        onChange={(e) => iconEvent(['system_more', 'base', 'icon'], e.target.value)}
                      />
                    </Form.Item>

                    <Collapse accordion items={[
                      {
                        key: "box",
                        label: "盒子",
                        children: <StyleWrapper form={form} preKeys={['system_more', 'system_more', 'default']} onStyleChange={() => upateStyleEvent(['system_more', 'system_more'])} />

                      },
                      {
                        key: "box-hover",
                        label: "盒子-悬浮",
                        children: <StyleWrapper form={form} preKeys={['system_more', 'system_more', 'hover']} onStyleChange={() => upateStyleEvent(['system_more', 'system_more'])} />

                      },
                    ]} />
                  </>
              }
            ]} />
          </>
      },
      {
        key: 'message',
        label: '在线留言',
        children:
          <>
            <Form.Item
              label="动画属性"
              name={['base', 'message_animate']}
            >
              <Select
                allowClear
                options={AnimateOptions}
                onChange={(value) => onConfigEvent(['base', 'message_animate'], value)}
              />
            </Form.Item>


            <Collapse accordion items={[
              {
                key: 'wrapper',
                label: '总盒子',
                children: <StyleWrapper form={form} preKeys={['message_box', 'default']} onStyleChange={() => upateStyleEvent(['message_box'])} />
              },
              {
                key: "title",
                label: '标题',
                extra: <AttrExtra onEvent={(eventKey) => handleAttrEvent(eventKey, 'title', ['message_title'], 'message')} />,
                children:
                  <>
                    <Form.Item
                      label="标题"
                      name={['base', 'message_title']}
                    >
                      <Input
                        onChange={(e) => onConfigEvent(['base', 'message_title'], e.target.value)}
                      />
                    </Form.Item>

                    <Form.Item
                      label="副标题"
                      name={['base', 'message_subtitle']}
                    >
                      <Input
                        onChange={(e) => onConfigEvent(['base', 'message_subtitle'], e.target.value)}
                      />
                    </Form.Item>

                    <Collapse accordion items={[
                      {
                        key: "box",
                        label: "盒子",
                        children: <StyleWrapper form={form} preKeys={['message_title', 'message_title', 'default']} onStyleChange={() => upateStyleEvent(['message_title', 'message_title'])} />
                      },
                      {
                        key: "text",
                        label: "标题",
                        children: <StyleWrapper form={form} preKeys={['message_title', 'message_title_text', 'default']} onStyleChange={() => upateStyleEvent(['message_title', 'message_title_text'])} />
                      },
                      {
                        key: "subtext",
                        label: "副标题",
                        children: <StyleWrapper form={form} preKeys={['message_title', 'message_title_subtext', 'default']} onStyleChange={() => upateStyleEvent(['message_title', 'message_title_subtext'])} />
                      },
                    ]}
                    />
                  </>

              },
              {
                key: "img",
                label: "图片",
                children:
                  <>
                    <FileUpload form={form} label='图片' name={['base', 'message_img']} onConfigEvent={onConfigEvent} />
                    <StyleWrapper form={form} preKeys={['message_img_box', 'default']} onStyleChange={() => upateStyleEvent(['message_img_box'])} />
                  </>
              },
              {
                key: 'content',
                label: "内容",
                children:
                  <Collapse accordion items={[
                    {
                      key: "box",
                      label: "盒子",
                      children: <StyleWrapper form={form} preKeys={['message_content', 'default']} onStyleChange={() => upateStyleEvent(['message_content'])} />
                    },
                    {
                      key: "info",
                      label: "信息",
                      children:
                        <>
                          <Form.Item
                            label="描述1"
                            name={['base', 'message_desc1']}
                          >
                            <Input
                              onChange={(e) => onConfigEvent(['base', 'message_desc1'], e.target.value)}
                            />
                          </Form.Item>
                          <Form.Item
                            label="描述2"
                            name={['base', 'message_desc2']}
                          >
                            <Input
                              onChange={(e) => onConfigEvent(['base', 'message_desc2'], e.target.value)}
                            />
                          </Form.Item>
                          <Form.Item
                            label="电话号码"
                            name={['base', 'message_mobile']}
                          >
                            <Input
                              onChange={(e) => onConfigEvent(['base', 'message_mobile'], e.target.value)}
                            />
                          </Form.Item>
                          <Form.Item
                            label="电话图标"
                            name={['base', 'message_mobile_icon']}
                          >
                            <Input
                              onChange={(e) => iconEvent(['base', 'message_mobile_icon'], e.target.value)}
                            />
                          </Form.Item>

                          <Collapse accordion items={[
                            {
                              key: 'box',
                              label: '盒子',
                              children: <StyleWrapper form={form} preKeys={['message_info', 'default']} onStyleChange={() => upateStyleEvent(['message_info'])} />
                            },
                            {
                              key: 'desc',
                              label: '描述1',
                              children: <StyleWrapper form={form} preKeys={['message_info_desc1', 'default']} onStyleChange={() => upateStyleEvent(['message_info_desc1'])} />
                            },
                            {
                              key: 'desc2',
                              label: '描述2',
                              children: <StyleWrapper form={form} preKeys={['message_info_desc2', 'default']} onStyleChange={() => upateStyleEvent(['message_info_desc2'])} />
                            },
                            {
                              key: 'phone',
                              label: '电话盒子',
                              children: <StyleWrapper form={form} preKeys={['message_info_phone', 'default']} onStyleChange={() => upateStyleEvent(['message_info_phone'])} />
                            },
                          ]} />
                        </>
                    },
                    {
                      key: "form",
                      label: "表单",
                      children:
                        <>
                          <Form.Item
                            label="按钮文本"
                            name={['base', 'message_btn']}
                          >
                            <Input
                              onChange={(e) => onConfigEvent(['base', 'message_btn'], e.target.value)}
                            />
                          </Form.Item>

                          <Collapse accordion items={[
                            {
                              key: 'box',
                              label: '盒子',
                              children: <StyleWrapper form={form} preKeys={['message_form', 'default']} onStyleChange={() => upateStyleEvent(['message_form'])} />
                            },
                            {
                              key: 'item',
                              label: 'item盒子',
                              children: <StyleWrapper form={form} preKeys={['message_form_item', 'default']} onStyleChange={() => upateStyleEvent(['message_form_item'])} />
                            },
                            {
                              key: 'input',
                              label: '普通',
                              children: <StyleWrapper form={form} preKeys={['message_form_input', 'default']} onStyleChange={() => upateStyleEvent(['message_form_input'])} />
                            },
                            {
                              key: 'input-focus',
                              label: '普通-聚焦',
                              children: <StyleWrapper form={form} preKeys={['message_form_input', 'focus']} onStyleChange={() => upateStyleEvent(['message_form_input'])} />
                            },
                            {
                              key: 'input-icon',
                              label: '普通-图标',
                              children: <StyleWrapper form={form} preKeys={['message_form_icon', 'default']} onStyleChange={() => upateStyleEvent(['message_form_icon'])} />
                            },
                            {
                              key: 'input-icon-hover',
                              label: '普通-图标-悬浮',
                              children: <StyleWrapper form={form} preKeys={['message_form_icon', 'hover']} onStyleChange={() => upateStyleEvent(['message_form_icon'])} />
                            },
                            {
                              key: 'textarea',
                              label: '多文本',
                              children: <StyleWrapper form={form} preKeys={['message_form_textarea', 'default']} onStyleChange={() => upateStyleEvent(['message_form_textarea'])} />
                            },
                            {
                              key: 'textarea-focus',
                              label: '多文本-聚焦',
                              children: <StyleWrapper form={form} preKeys={['message_form_textarea', 'focus']} onStyleChange={() => upateStyleEvent(['message_form_textarea'])} />
                            },
                            {
                              key: 'placeholder',
                              label: '输入框的提示语',
                              children: <StyleWrapper form={form} preKeys={['message_form_placeholder', 'default']} onStyleChange={() => upateStyleEvent(['message_form_placeholder'])} />,
                            },
                            {
                              key: 'input_error',
                              label: '输入框错误时(公共)',
                              children:
                                <StyleWrapper form={form} preKeys={['message_input_error', 'default']} onStyleChange={() => upateStyleEvent(['message_input_error'])} />
                            },
                            {
                              key: 'btn-box',
                              label: '按钮盒子',
                              children:
                                <StyleWrapper form={form} preKeys={['message_btn_box', 'default']} onStyleChange={() => upateStyleEvent(['message_btn_box'])} />
                            },
                            {
                              key: 'btn',
                              label: '按钮',
                              children:
                                <StyleWrapper form={form} preKeys={['message_btn', 'default']} onStyleChange={() => upateStyleEvent(['message_btn'])} />
                            },
                            {
                              key: 'btn_hover',
                              label: '按钮-悬浮',
                              children:
                                <StyleWrapper form={form} preKeys={['message_btn', 'hover']} onStyleChange={() => upateStyleEvent(['message_btn'])} />
                            },
                          ]} />
                        </>

                    }
                  ]}
                  />
              }
            ]} />
          </>
      },
      {
        key: 'friendlink',
        label: '友情链接',
        children:
          <Collapse accordion items={[
            {
              key: 'wrapper',
              label: '总盒子',
              children: <StyleWrapper form={form} preKeys={['friendlink_box', 'default']} onStyleChange={() => upateStyleEvent(['friendlink_box'])} />
            },
            {
              key: "title",
              label: '标题',
              extra: <AttrExtra onEvent={(eventKey) => handleAttrEvent(eventKey, 'title', ['friendlink_title'], 'friendlink')} />,
              children:
                <Collapse accordion items={[
                  {
                    key: "box",
                    label: "盒子",
                    children: <StyleWrapper form={form} preKeys={['friendlink_title', 'friendlink_title', 'default']} onStyleChange={() => upateStyleEvent(['friendlink_title', 'friendlink_title'])} />
                  },
                  {
                    key: "text",
                    label: "标题",
                    children: <StyleWrapper form={form} preKeys={['friendlink_title', 'friendlink_title_text', 'default']} onStyleChange={() => upateStyleEvent(['friendlink_title', 'friendlink_title_text'])} />
                  },
                  {
                    key: "subtext",
                    label: "副标题",
                    children: <StyleWrapper form={form} preKeys={['friendlink_title', 'friendlink_title_subtext', 'default']} onStyleChange={() => upateStyleEvent(['friendlink_title', 'friendlink_title_subtext'])} />
                  },
                ]}
                />
            },
            {
              key: "list",
              label: '列表',
              children:
                <Collapse accordion items={[
                  {
                    key: "box",
                    label: "盒子",
                    children: <StyleWrapper form={form} preKeys={['friendlink_list', 'default']} onStyleChange={() => upateStyleEvent(['friendlink_list'])} />
                  },
                  {
                    key: "item",
                    label: "item盒子",
                    children: <StyleWrapper form={form} preKeys={['friendlink_item', 'default']} onStyleChange={() => upateStyleEvent(['friendlink_item'])} />
                  },
                  {
                    key: "item-hover",
                    label: "item盒子-悬浮",
                    children: <StyleWrapper form={form} preKeys={['friendlink_item', 'hover']} onStyleChange={() => upateStyleEvent(['friendlink_item'])} />
                  },
                  {
                    key: "img",
                    label: "图片",
                    children: <StyleWrapper form={form} preKeys={['friendlink_img', 'default']} onStyleChange={() => upateStyleEvent(['friendlink_img'])} />
                  },
                  {
                    key: "text",
                    label: "文本",
                    children: <StyleWrapper form={form} preKeys={['friendlink_text', 'default']} onStyleChange={() => upateStyleEvent(['friendlink_text'])} />
                  },
                ]}
                />
            },
          ]} />
      },
    ]
    return items
  }, [
    template2.base.search_flag,
    template2.exhibition.base.type,
    template2.base.exhibition_category_show,
    template2.recommend.base.type,
    template2.base.recommend_category_show,
    template2.news.base.type,
    template2.base.news_category_show,
    updateCtx.updateFlag
  ])


  useEffect(() => {
    setAttrForm(form)
  }, [form])

  return (
    <>
      <Form
        name='home'
        form={form}
        initialValues={template2}
        labelCol={{
          span: 6,
        }
        }
        autoComplete="off"
        spellCheck="false"
      >

        {/* 按钮区域 */}
        <AttrHeaderBtn onClickEvent={handleHeaderEvent} />

        {/* 对象形式的样式编辑 */}
        <Collapse accordion destroyInactivePanel size='middle' items={items} />

      </Form>

      {/* 字符串形式的样式编辑 */}
      <CssEdit value={template2.css} open={open} onValueChange={cssChange} setOpen={setOpen} ref={cssEditRef} />

    </>
  )
}
export default React.memo(HomeAttr) 